<template>
    <div id="outer">
        <div id="top">
            <svg>
                <use xlink:href="#icon-shuaxin"></use>
            </svg>
            <span></span>
            <div id="btn">
                <svg>
                    <use xlink:href="#icon-sanjiao3"></use>
                </svg>
                <span>播放</span>
            </div>
        </div>
        <div id="bottom">
            <ul>
                <li>
                    <div>
                        <img src="" alt="">
                        <div>
                            <span id="title"></span>
                            <svg>
                                <use xlink:href="#"></use>
                            </svg>
                        </div>

                    </div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    import {getBanner} from "../api";
    export default {
        name: "JingXuan",
        data(){
            return{
                JingXuanMusicList:null
            }
        },
        mounted() {
            getBanner('/top/playlist/highquality')
                .then(response=>{
                    this.JingXuanMusicList=response.data
                    console.log(this.JingXuanMusicList)
                })
        }
    }
</script>

<style scoped>
    svg{
        width: 20px;
        height: 20px;
    }
    #outer {
        width: 100%;
        height: 250px;
        background: #fff;
        border-radius: 10px;
        margin-top: 10px;
    }
    #top{
        height: 34px;
    }
    #top>svg{
        margin-top: 10px;
        margin-left: 10px;
    }
    #btn{
        width: 50px;
        float: right;
        border: .5px solid lightgrey;
        border-radius: 8px;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        margin-right: 10px;
    }
    #btn>svg{
        width: 10px;
        height: 10px;
    }
    #bottom{
        overflow: scroll;
    }
    #bottom::-webkit-scrollbar{
        display: none;
    }
    ul{
        width: 1400px;
        height: 200px;
    }
    ul>li{
        width: 350px;
        height: 100%;
        /*background: red;*/
    }
    li{
       float: left;
    }
    img{
        width: 50px;
        height: 50px;
    }
    li>div{
        height: 65px;
        width: 100%;
    }
    li>div>div{
        display: inline-block;
        width: 300px;
        border-bottom: 1px solid lightgrey;
    }
</style>